{% import "_includes/forms" as forms %}
{% set default = default is defined ? default : false %}

{% set seoMeta %}
	<div class="seo--meta">
		{% set seoTitle %}
			<template id="seoMetaToken">
				<li>
					<input
						type="hidden"
						name="title[__LOOP_INDEX__][key]"
					/>
					<input
						type="hidden"
						name="title[__LOOP_INDEX__][locked]"
						value="0"
					/>
					<button title="Lock Token" type="button" data-lock>
						<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-293.000000, -674.000000)" fill="#988FFF" fill-rule="nonzero">
									<g transform="translate(282.000000, 664.000000)">
										<path d="M20.6138432,16.2187206 C20.4541333,16.072843 20.2603303,16.0000274 20.0321347,16.0000274 L13.7369688,16.0000274 L13.7369688,13.5000502 C13.7369688,12.9478715 13.9508441,12.476581 14.3785348,12.0859322 C14.8062554,11.6953654 15.3222644,11.500041 15.9267415,11.500041 C16.5311587,11.500041 17.0472575,11.6953381 17.4747984,12.0859322 C17.9025191,12.476581 17.8598329,12.4479308 17.8598329,13.0000821 C17.8598329,13.1354519 17.9139683,13.2526247 18.0222092,13.351573 C18.1306897,13.4505486 18.2590329,13.5000502 18.4070889,13.5000502 L18.9547642,13.5000502 C19.1029101,13.5000502 19.2311933,13.4505486 19.3396739,13.351573 C19.447705,13.2526247 19.5020501,13.1354519 19.5020501,13.0000821 C19.5020501,12.0364306 19.3836782,11.7123311 18.6339313,11.0273823 C17.8840645,10.342406 16.981618,10 15.9267415,10 C14.8717751,10 13.9694185,10.342406 13.2194918,11.0273549 C12.4696849,11.7122217 12.0947815,12.5363713 12.0947815,13.5000228 L12.0947815,16 L11.8211086,16 C11.5930928,16 11.39917,16.0729799 11.23949,16.2186933 C11.07981,16.3644067 11,16.5415888 11,16.7499384 L11,21.2500068 C11,21.4584386 11.07984,21.6355386 11.23949,21.7813341 C11.39917,21.9270475 11.5930928,22 11.8211086,22 L20.0321347,22 C20.2603303,22 20.454313,21.9270475 20.6138432,21.7813341 C20.7733734,21.6355386 20.8533332,21.4584386 20.8533332,21.2500068 L20.8533332,16.7499658 C20.853453,16.5416161 20.7735831,16.3646256 20.6138432,16.2187206 Z"></path>
									</g>
								</g>
							</g>
						</svg>
						<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-496.000000, -674.000000)" fill="#1A0DAB" fill-rule="nonzero">
									<g transform="translate(485.000000, 664.000000)">
										<path d="M20.5791759,15.6931712 C20.4200414,15.5340665 20.2269367,15.4545738 19.9995633,15.4545738 L19.7269958,15.4545738 L19.7269958,13.8181241 C19.7269958,12.77269 19.3520998,11.8750471 18.602069,11.1250462 C17.8520979,10.3750154 16.9545446,10 15.9089612,10 C14.8634077,10 13.9656753,10.3750154 13.2157639,11.1250163 C12.4657331,11.8750471 12.0908372,12.7726601 12.0908372,13.8181241 L12.0908372,15.4545738 L11.8181503,15.4545738 C11.5909559,15.4545738 11.3977318,15.5340665 11.2386272,15.6931712 C11.0795225,15.8521564 11,16.0453805 11,16.2727838 L11,21.1818047 C11,21.4089991 11.0795523,21.6022829 11.2386272,21.7614174 C11.3977318,21.9203728 11.5909559,21.999955 11.8181503,21.999955 L19.9997722,21.999955 C20.2271456,21.999955 20.4202205,21.9204624 20.5793849,21.7614174 C20.7383403,21.6022829 20.818012,21.4089991 20.818012,21.1818047 L20.818012,16.2726943 C20.8181314,16.0454701 20.7383403,15.8522758 20.5791759,15.6931712 Z M18.0907251,15.4545738 L13.7271974,15.4545738 L13.7271974,13.8181241 C13.7271974,13.2158845 13.9403021,12.7016451 14.366422,12.2755849 C14.7926017,11.849465 15.3067515,11.6364498 15.9090508,11.6364498 C16.5114097,11.6364498 17.0254402,11.8494351 17.4516497,12.2755849 C17.8776502,12.7016153 18.0907251,13.2158845 18.0907251,13.8181241 L18.0907251,15.4545738 Z"></path>
									</g>
								</g>
							</g>
						</svg>
					</button>
					<input
						type="text"
						data-template
						name="title[__LOOP_INDEX__][template]"
						placeholder="{{ '{title}' }}"
					/>
					<button title="Delete Token" type="button" data-delete>
						<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-674.000000, -676.000000)" fill="#988FFF">
									<g transform="translate(485.000000, 664.000000)">
										<path d="M196.76561,18.6344382 C197.07813,18.9466143 197.07813,19.4534005 196.76561,19.7655766 C196.609437,19.9219255 196.404742,20.000013 196.200048,20.000013 C195.995179,20.000013 195.790659,19.9219255 195.634486,19.7655766 L193.000065,17.1311232 L190.365645,19.7655766 C190.209472,19.9219255 190.004777,20.000013 189.800083,20.000013 C189.595388,20.000013 189.390694,19.9219255 189.23452,19.7655766 C188.921827,19.4534005 188.921827,18.9466143 189.23452,18.6344382 L191.868767,15.9999848 L189.23452,13.3657053 C188.921827,13.0533553 188.921827,12.546743 189.23452,12.234393 C189.546867,11.921869 190.053125,11.921869 190.365645,12.234393 L193.000065,14.8688464 L195.634486,12.234393 C195.946832,11.921869 196.45309,11.921869 196.76561,12.234393 C197.07813,12.546743 197.07813,13.0533553 196.76561,13.3657053 L194.13119,15.9999848 L196.76561,18.6344382 Z"></path>
									</g>
								</g>
							</g>
						</svg>
					</button>
				</li>
			</template>

			<ul class="seo--meta-title" id="seoMetaTitle">
				{% for tag in settings.title is empty and globalSettings.title is defined ? globalSettings.title : settings.title %}
				<li class="{{ tag.locked ? 'locked' }}">
					<input
						type="hidden"
						name="title[{{ loop.index0 }}][key]"
						value="{{ tag.key }}"
					/>
					<input
						type="hidden"
						name="title[{{ loop.index0 }}][locked]"
						value="{{ tag.locked ? 1 : 0 }}"
					/>
					<button title="{{ tag.locked ? 'Unlock' : 'Lock' }} Token" type="button" data-lock>
						<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-293.000000, -674.000000)" fill="#988FFF" fill-rule="nonzero">
									<g transform="translate(282.000000, 664.000000)">
										<path d="M20.6138432,16.2187206 C20.4541333,16.072843 20.2603303,16.0000274 20.0321347,16.0000274 L13.7369688,16.0000274 L13.7369688,13.5000502 C13.7369688,12.9478715 13.9508441,12.476581 14.3785348,12.0859322 C14.8062554,11.6953654 15.3222644,11.500041 15.9267415,11.500041 C16.5311587,11.500041 17.0472575,11.6953381 17.4747984,12.0859322 C17.9025191,12.476581 17.8598329,12.4479308 17.8598329,13.0000821 C17.8598329,13.1354519 17.9139683,13.2526247 18.0222092,13.351573 C18.1306897,13.4505486 18.2590329,13.5000502 18.4070889,13.5000502 L18.9547642,13.5000502 C19.1029101,13.5000502 19.2311933,13.4505486 19.3396739,13.351573 C19.447705,13.2526247 19.5020501,13.1354519 19.5020501,13.0000821 C19.5020501,12.0364306 19.3836782,11.7123311 18.6339313,11.0273823 C17.8840645,10.342406 16.981618,10 15.9267415,10 C14.8717751,10 13.9694185,10.342406 13.2194918,11.0273549 C12.4696849,11.7122217 12.0947815,12.5363713 12.0947815,13.5000228 L12.0947815,16 L11.8211086,16 C11.5930928,16 11.39917,16.0729799 11.23949,16.2186933 C11.07981,16.3644067 11,16.5415888 11,16.7499384 L11,21.2500068 C11,21.4584386 11.07984,21.6355386 11.23949,21.7813341 C11.39917,21.9270475 11.5930928,22 11.8211086,22 L20.0321347,22 C20.2603303,22 20.454313,21.9270475 20.6138432,21.7813341 C20.7733734,21.6355386 20.8533332,21.4584386 20.8533332,21.2500068 L20.8533332,16.7499658 C20.853453,16.5416161 20.7735831,16.3646256 20.6138432,16.2187206 Z"></path>
									</g>
								</g>
							</g>
						</svg>
						<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-496.000000, -674.000000)" fill="#1A0DAB" fill-rule="nonzero">
									<g transform="translate(485.000000, 664.000000)">
										<path d="M20.5791759,15.6931712 C20.4200414,15.5340665 20.2269367,15.4545738 19.9995633,15.4545738 L19.7269958,15.4545738 L19.7269958,13.8181241 C19.7269958,12.77269 19.3520998,11.8750471 18.602069,11.1250462 C17.8520979,10.3750154 16.9545446,10 15.9089612,10 C14.8634077,10 13.9656753,10.3750154 13.2157639,11.1250163 C12.4657331,11.8750471 12.0908372,12.7726601 12.0908372,13.8181241 L12.0908372,15.4545738 L11.8181503,15.4545738 C11.5909559,15.4545738 11.3977318,15.5340665 11.2386272,15.6931712 C11.0795225,15.8521564 11,16.0453805 11,16.2727838 L11,21.1818047 C11,21.4089991 11.0795523,21.6022829 11.2386272,21.7614174 C11.3977318,21.9203728 11.5909559,21.999955 11.8181503,21.999955 L19.9997722,21.999955 C20.2271456,21.999955 20.4202205,21.9204624 20.5793849,21.7614174 C20.7383403,21.6022829 20.818012,21.4089991 20.818012,21.1818047 L20.818012,16.2726943 C20.8181314,16.0454701 20.7383403,15.8522758 20.5791759,15.6931712 Z M18.0907251,15.4545738 L13.7271974,15.4545738 L13.7271974,13.8181241 C13.7271974,13.2158845 13.9403021,12.7016451 14.366422,12.2755849 C14.7926017,11.849465 15.3067515,11.6364498 15.9090508,11.6364498 C16.5114097,11.6364498 17.0254402,11.8494351 17.4516497,12.2755849 C17.8776502,12.7016153 18.0907251,13.2158845 18.0907251,13.8181241 L18.0907251,15.4545738 Z"></path>
									</g>
								</g>
							</g>
						</svg>
					</button>
					<input
						type="text"
						data-template
						name="title[{{ loop.index0 }}][template]"
						placeholder="{{ '{title}' }}"
						value="{{ tag.template }}"
						style="width:calc({{ tag.template|length }}ch + 10px)"
					/>
					<button title="Delete Token" type="button" data-delete>
						<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g transform="translate(-674.000000, -676.000000)" fill="#988FFF">
									<g transform="translate(485.000000, 664.000000)">
										<path d="M196.76561,18.6344382 C197.07813,18.9466143 197.07813,19.4534005 196.76561,19.7655766 C196.609437,19.9219255 196.404742,20.000013 196.200048,20.000013 C195.995179,20.000013 195.790659,19.9219255 195.634486,19.7655766 L193.000065,17.1311232 L190.365645,19.7655766 C190.209472,19.9219255 190.004777,20.000013 189.800083,20.000013 C189.595388,20.000013 189.390694,19.9219255 189.23452,19.7655766 C188.921827,19.4534005 188.921827,18.9466143 189.23452,18.6344382 L191.868767,15.9999848 L189.23452,13.3657053 C188.921827,13.0533553 188.921827,12.546743 189.23452,12.234393 C189.546867,11.921869 190.053125,11.921869 190.365645,12.234393 L193.000065,14.8688464 L195.634486,12.234393 C195.946832,11.921869 196.45309,11.921869 196.76561,12.234393 C197.07813,12.546743 197.07813,13.0533553 196.76561,13.3657053 L194.13119,15.9999848 L196.76561,18.6344382 Z"></path>
									</g>
								</g>
							</g>
						</svg>
					</button>
				</li>
				{% endfor %}
				<li data-static>
					<button title="Add a Token" type="button" id="seoMetaAdd">
						+ Token
					</button>
				</li>
			</ul>
		{% endset %}
		{{ forms.field({
			label: 'Page Title',
			instructions: 'Create a token for each part of your title. Clicking the lock will prevent the user from editing the contents of that token. Tokens use the same syntax as [Dynamic Entry Titles](https://docs.craftcms.com/v3/sections-and-entries.html#dynamic-entry-titles).',
		}, seoTitle) }}

		{{ forms.textareaField({
			label: 'Page Description',
			instructions: 'This supports the same syntax as [Dynamic Entry Titles](https://docs.craftcms.com/v3/sections-and-entries.html#dynamic-entry-titles).',
			id: 'description',
			name: 'description',
			value: settings.description is empty and globalSettings.description is defined ? globalSettings.description : settings.description
		}) }}
	</div>
{% endset %}
{{ forms.field({
	label: 'Page Meta',
	instructions: 'Decide how the page meta should look for this field',
}, seoMeta) }}

{% if volumes %}
	{{ forms.elementSelectField({
		label: (default ? 'Default ') ~ 'Social Image',
		instructions: 'The image that will be used when the page is shared via social networks. This can be modified on a per-entry basis.',
		name: 'socialImage',
		id: 'socialImage',
		elements: settings.socialImage|length ? craft.assets.id(settings.socialImage).all() : null,
		limit: 1,
		elementType: 'craft\\elements\\Asset',
	}) }}
{% else %}
	{{ forms.field(
		{
			label: (default ? 'Default ') ~ 'Social Image',
		},
		'<p class="error">You\'ll need a volume with public URLs before you can select a social image!</p>'
	) }}
{% endif %}

{# Only show this option on a per-field basis, not globally #}
{% if globalSettings is defined %}
	{{ forms.lightswitchField({
		label: 'Hide Social Meta Tab',
		instructions: 'Will hide the social meta tab when switched on. This is useful if you have pre-existing social media fields.',
		name: 'hideSocial',
		id: 'hideSocial',
		on: "hideSocial" in settings|keys and settings.hideSocial is defined ? settings.hideSocial : false,
	}) }}

	{% set robots %}
		{% include 'seo/_seo/robots' with {
			robots: settings.robots
			? settings.robots
			: globalSettings is defined
			? globalSettings.robots,
			name: 'robots',
		} %}
	{% endset %}
	{{ forms.field(
		{
			label: 'Robots'|t,
			instructions: 'Set the default global robots directives. This can be changed on a per-entry basis'|t,
		},
		robots
	) }}
{% endif %}